<template>
    <div class="app-share-warp">
        <img src="http://img.uuuda.com/udaWeapp2.0/icon/pullnew/invitation-code-bg-v2.png" class="welcom"/>
       <div style="position: relative">

           <div class="input-box">
               <div class="login-input-wrap">
                   <img src="http://img.uuuda.com/udaWeapp2.0/icon/down/download-logo.png">
                   <input type="tel" class="inputText" maxlength="11" placeholder="输入手机号" v-model="telephone" @focus="getFocus"/>
               </div>
               <div class="login-input-code">
                   <input type="tel" class="inputText" maxlength="11" placeholder="输入验证码" v-model="code" @focus="getFocus"/>
                   <div v-if="telephone.length>=11">

                       <div class="code-btn" v-if='reget==1' @click="sendCode">{{code_text}}</div>
                       <div class="code-btn" v-if='reget==2' style="background:rgba(211,213,222,1);">{{time}}s重新获取</div>
                       <div class="code-btn" v-if='reget==3' @click="reCode">重新获取验证码</div>
                   </div>
                   <div v-else>
                       <div class="code-btn" style="background:rgba(211,213,222,1); " >{{code_text}}</div>

                   </div>

               </div>
               <div class="login-input-btn" @click="initLogin" v-if="canSend">注册领取</div>
               <div class="login-input-btn" @click="initLogin" style="background:rgba(211,213,222,1); " v-else>注册领取</div>

           </div>
           <img class="rule-bg" src='http://img.uuuda.com/udaWeapp2.0/icon/pullnew/invitation-friend-rule2.png'/>
       </div>

    </div>
</template>
<script>
let axios = require("axios");

var interval = null;
export default {
    data() {
        return {
            telephone: '',
            canSend: false,
            code: '',
            time: 60,
            code_text:"获取验证码",
            reget: 1,
            shareKey:'',

        };
    },

    created() {
        let self=this;
    },
    mounted(){
        let self = this;
        let query = self.$route.query;
        let shareKey = query.shareKey || '';
        self.shareKey=shareKey
        console.log("h5来源参数")
        console.log(shareKey)

    },

    watch:{
        //监听手机号输入
        telephone(val) {
            let self=this;
            self.telephone=val
            console.log(val)
           if(val!='' && self.code!=''){
               self.canSend=true
           }
        },
        code(val) {
            let self=this;
            if(val!='' && self.telephone!=''){
                self.canSend=true
            }
        },

    },
    methods: {

        getFocus() {
            return
            //这里用到了jq类库
            $("input,textarea").on("blur", function() {
                window.scroll(0, 0);
            });
        },

        //倒计时函数
        getCode: function (options) {
            let me = this;
            return
            let currentTime = me.time
            me.reget= 2,//改变字体样式颜色
            interval = setInterval(function () {
                currentTime--;
                me.time=currentTime
                if (currentTime <= 0) {
                    clearInterval(interval)
                        me.time= 59,
                        // me.currentTime= 11,
                        me.reget= 3,//改变字体样式颜色
                        me.currentTime=59
                }
            }, 1000)
        },
        reCode:function () {
            let me = this;
            // me.reget= 2;
            return
            me.sendCode();
        },
        checkInput:function(){

        },
        sendCode:function(){
            let self = this;
             return
            axios({
                method: "POST",
                url: "/api/user/sendcode",
                params: {
                    'phone': self.telephone,
                }
            }).then(function(res) {
                let rdata = res.data;
                if(rdata.errno == 200){
                    console.log("发送验证码")
                    console.log(rdata)
                    self.getCode();

                }else {
                    self.$dialog.toast({
                        mes: res.data.msg,
                        timeout: 1500
                    });
                }
            });

        },
        initLogin:function () {
            let self = this;
            return
            console.log(self.telephone.length)

            if (self.checkPhone(self.telephone) == false && self.telephone.length>=11){

                self.$dialog.toast({
                    mes: '手机号格式错误',
                    timeout: 1500
                });
                return
            }else if(self.code=='' ||self.telephone==''){

                self.$dialog.toast({
                    mes: '手机号验证码不能为空',
                    timeout: 1500
                });
                return

            }
            self.canSend=true


            axios({
                method: "POST",
                url: "/api/user/verifyshare",
                params: {
                    'code': self.code,
                    'phone': self.telephone,
                    'shareKey': self.shareKey,
                }
            }).then(function(res) {
                let rdata = res.data;
                if(rdata.errno == 200){
                    console.log("登录")
                    console.log(rdata.msg)
                    self.$dialog.toast({
                        mes: res.data.msg,
                        timeout: 1500
                    });
                    setTimeout(function () {
                        self.$router.push({path:"/appDownload"});

                    },1500)

                }else {
                    self.$dialog.toast({
                        mes: res.data.msg,
                        timeout: 1500
                    });
                }
            });

        },
        checkPhone:function(str) {
            // 定义手机号的正则
            var isMobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
            //拿到去除空格后的手机号
            // 校验手机号
            return isMobile.test(str);
        },




    }
};
</script>

<style>
    .app-share-warp{
        position: relative;
        width: 100%;
        height: 100%;
        background: white;
        padding-bottom: 24px;
    }
    .app-share-warp .welcom{
        position:relative;
        width:100%;
        /*height:100%;*/
        margin:0;
        display: block;

    }
    .app-share-warp .inputText{
        position: relative;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(43,51,26,1);
        line-height:18px;
    }
  .app-share-warp .input-box{
      position: relative;
      height:236px;
      background:rgba(255,255,255,1);
      border-radius:8px;
      top:-13px;
      padding: 0 24px 16px 24px;
      border-bottom: 8px solid #EBF2F2;


  }
    .app-share-warp .login-input-wrap{
        position: relative;
        display: flex;
        align-items: center;
        top: 16px;
        /*margin-top: 16px;*/
        border-bottom: .5px solid #D3D5DE;
    }
    .app-share-warp .login-input-code{
        position: relative;
        display: flex;
        align-items: center;
        top: 16px;
        justify-content: space-between;
        /*margin-top: 16px;*/
        border-bottom: .5px solid #D3D5DE;
    }
    .app-share-warp .rule-bg{
        position: relative;
        display: block;
        /*width: 351px;*/
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 0 16px;
    }
    .app-share-warp .login-input-btn{
        position: relative;
        height:48px;
        background:rgba(25,121,255,1);
        border-radius:8px;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:48px;
        text-align: center;
        margin-top: 50px;
    }
    .app-share-warp .login-input-wrap input{
        position: relative;
        height: 48px;
        font-size:18px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        line-height:18px;
        border:none;
        color: #2E2F33;
    }


    .app-share-warp .login-input-code input{
        position: relative;
        height: 48px;
        font-size:18px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        line-height:18px;
        border:none;
    }

    .app-share-warp .login-input-wrap img{
        position: relative;
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    .app-share-warp .code-btn{
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -14px;
        width:76px;
        height:28px;
        text-align: center;
        background:rgba(26,121,255,1);
        border-radius:4px;
        font-size:12px;
        padding: 0;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:28px;
    }
    .app-share-warp :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:#B1B4C4;

    }
    .app-share-warp ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:#B1B4C4;

    }
    .app-share-warp input:-ms-input-placeholder,
    .app-share-warp  textarea:-ms-input-placeholder {
        color:#B1B4C4;

    }
    .app-share-warp input::-webkit-input-placeholder,
    .app-share-warp  textarea::-webkit-input-placeholder {
        color:#B1B4C4;

    }
    .top-img2{
        position: absolute;
        width: 100%;
        left: 0;
        top:0;
    }

</style>
